<template>
	<view>
		<hg-dialog v-model="payVisible" @confirm="confirmPay">
			<view class="horizontal">
				<view class="fixed" style="width: 5em;">实收金额:</view>
				<view style="display:flex;border: solid 1px black;" class="scale">
					<text class="fixed">￥</text>
					<input class="scale" style="border: none;" type="digit" v-model="post.price" placeholder="请输入实际到账金额"/>
				</view>
			</view>
			<view class="horizontal" style="margin-top: 20rpx;">
				<view style="width: 5em;" class="fixed">备注：</view>
				<textarea style="min-height: 3em;max-height: 3em;overflow: scroll;" class="scale" confirm-type="done" adjust-position v-model="post.remark" auto-height />
			</view>
		</hg-dialog>
		<view class="horizontal">
			<view class="fixed" style="width: 5em;">房号：</view>
			<view class="scale">{{room}}</view>
			<view class="fixed" style="font-weight: bold;">{{detail.status==0?'未缴':'已缴'}}</view>
		</view>
		<view class="horizontal">
			<view class="fixed" style="width: 5em;">户名：</view>
			<view class="scale">{{roomMaster}}</view>
		</view>
		<view class="hr"></view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">抄表日期：</view>
			<view class="scale">{{detail.readTime | smartTime('YY/mm/dd')}}</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">本次读数：</view>
			<view class="scale">{{detail.currentNum}}</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">上次读数：</view>
			<view class="scale">{{detail.lastNum}}</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">实用水量：</view>
			<view class="scale">{{detail.waterNum}}L</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">应缴金额：</view>
			<view class="scale">￥{{detail.price}}元</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">抄表人：</view>
			<view class="scale">{{detail.staff.name}}</view>
		</view>
		<view class="horizontal item">
			<view class="fixed" style="width: 5em;">手机号：</view>
			<view class="scale">{{detail.staff.phone}}</view>
		</view>
		
		<block v-if="detail.status==1">
			<view class="hr"></view>
			
			<view class="horizontal item">
				<view class="fixed" style="width: 5em;">实收金额：</view>
				<view class="scale" style="color: red">￥{{detail.payInfo.price}}</view>
			</view>
			
			<view class="horizontal item;">
				<view class="fixed" style="width: 5em;">备注：</view>
				<view class="scale" style="color: red">{{detail.payInfo.remark}}</view>
			</view>
			
			<view class="horizontal item">
				<view class="fixed" style="width: 5em;">支付方式：</view>
				<view class="scale">{{['市民小程序', '人工',][detail.payInfo.payClassify-1]}}</view>
			</view>
			
			<view class="horizontal item">
				<view class="fixed" style="width: 5em;">收费人：</view>
				<view class="scale">{{detail.payInfo.collectStaff.name}}</view>
			</view>
			
			<view class="horizontal item">
				<view class="fixed" style="width: 5em;">手机号：</view>
				<view class="scale">{{detail.payInfo.collectStaff.phone}}</view>
			</view>
		</block>
		
		<view class="bottom horizontal">
			<button style="background: #007AFF;color: white;" class="capsule scale" @tap="handlePayment" v-if="detail.status==0">现金收款</button>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	
	import hgDialog from '@/components/hg-dialog/hg-dialog.vue'
	
	export default {
		components:{
			hgDialog,
		},
		data() {
			return {
				payVisible:false,
				post:{
					"orderId":0, // 工单ID
					"price":0, // 实际支付金额
					"remark":"" //支付备注
				},
				detail: {
					"id": '', // 账单ID
					"readTime": "", // 抄表时间
					"roomDetailVo": {
						"id": 0, //房号ID
						"courtName": "", //小区名称
						"buildingName": "", //楼宇名称
						"floor": "", //楼层
						"unit": 0, //单元 
						"no": "", //房号
						"roomMasterInfoDetailVo": {
							"id": 0,
							"roomId": 0,
							"phone": "", // 户主手机号
							"name": "", // 户主名称
							"companyName": "", // 单位名称
							"type": 1 // 用户类型 1：个人 2：单位
						}
					},
					"currentNum": 0, // 本次读数
					"lastNum": 0, // 上次读数
					"waterNum": 0, // 用水量
					"price": 0, // 应缴金额 （与支付对象内orderPrice一致）
					"status": -1, // 支付状态 0：未支付 1 已支付
					"payInfo": {
						"orderPrice": 0, // 订单金额
						"price": 0, // 实际缴费金额
						"payClassify": 2, // 支付方式 1 小程序 2 人工
						"payTime": "", // 支付时间
						"collectStaff": { // 收费人 （只会人工才会存在）
							"phone": "", // 收费人手机号
							"name": "" // 收费人姓名
						}
					},
					"staff": { // 抄表人信息
						"phone": "", // 抄表人手机号 
						"name": "" // 抄表人姓名
					}
				}
			}
		},
		methods: {
			handlePayment(){
				this.payVisible = true
				this.post.price=this.detail.price
			},
			// 确认人工收款
			confirmPay(){
				uni.showToast({
					title: '实收金额与应缴金额不一致，请备注说明',
					icon:'none',
					duration:5000,
				});
				return
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + 'order/pay',
					method: 'POST',
					data: {
						...this.post
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							uni.showModal({
								title: '收款',
								content: '收款成功！',
								showCancel: false,
								confirmText: '确定',
								success: res => {
									if(res.confirm){
										uni.redirectTo({
											url: '../bills/bills?status=1',
										});
									}
								},
							});
						}else{
							console.warn(data)
							uni.showToast({
								title: data.message,
								icon:'none'
							});
						}
					},
					fail: (err) => {console.error(err.errMsg)},
				});
			}
		},
		computed:{
			room(){
				return `${this.detail.roomDetailVo.courtName}${this.detail.roomDetailVo.buildingName}` + 
				`${this.detail.roomDetailVo.unit}单元${this.detail.roomDetailVo.floor}层${this.detail.roomDetailVo.no}`
			},
			roomMaster(){
				return this.detail.roomDetailVo.roomMasterInfoDetailVo.type==1?
					this.detail.roomDetailVo.roomMasterInfoDetailVo.name: 
					this.detail.roomDetailVo.roomMasterInfoDetailVo.companyName
			}
		},
		onLoad(opts) {
			const {id} = opts
			this.post.orderId = id
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.request({
				header: {
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url: `${app.globalData.domain}order/detail/${id}`,
				method: 'GET',
				data: {},
				success: res => {
					uni.hideLoading()
					const {
						data
					} = res
					console.log(data)
					if (data.code == 200) {
						this.detail = data.data
					} else {
						console.warn(data.message)
						uni.showToast({
							title: data.message,
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error(err.message)
				},
			});
		}
	}
</script>

<style scoped>
	.hr{
		height: 0;
		border-bottom: solid 1px gray;
		margin: 10rpx 0;
	}
	
	input, textarea{
		border: solid 1px black
	}
	
	textarea{
		max-height: 5em;
		
		overflow: scroll;
	}
</style>
